<div class="list-body">
	<form id="deviceForm" data-toggle="ajaxsearch" data-options="{searchDatagrid:$.CurrentNavtab.find('#device-list'),beforeSubmit:setDeviceSearchValue}">
	 	<div class="row">
			<div class="search-input">
        		<input type="text" id="device-name-input" placeholder="输入设备SN" onblur="Trim(this,this.value)">
        		<input type="hidden" name="name" id="deviceNameDisNone" >
        		{{#if roleinfo.role}}
        			<input type="text" id="device-uname-input" placeholder="输入所属用户" onblur="Trim(this,this.value)">
        			<input type="hidden" id="deviceUnameDisNone" name="uname">
				{{/if}}
        		<button type="submit" class="search-btn" data-icon="search"></button>
    		</div>
    		<a class="add-btn device-btn mr-10" onclick="dialog_devices_add()"><i class="fa fa-plus-square-o"></i><span>添加设备</span></a>
		</div>
	</form>
	<div class="row">
		<table id="device-list" class="table table-bordered" style="margin-bottom: 35px!important;"></table>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("input").placeholder();
	$('.navtab-sysdevice').addClass("active");
	if('{{roleinfo.role}}'){
			$('.device-btn').addClass('disable');
			$('.device-btn').removeAttr('onclick');
	}else{
      $('.device-btn').removeClass('disable');
      $('.device-btn').attr('onclick');
    }
	$('#device-list').datagrid({
		height:'100%',
		width:'100%',
		tableWidth:'100%',
		gridTitle:'设备列表',
		local:'remote',
        filterThead:false,
		dataUrl:'/devices/list',
		// columnMenu:true,
		columnFilter:true,
		columnResize:false,
		columnLock:false,
		columnShowhide:false,
		hScrollbar:true,
		columns:[
		{
            name: 'lists',
            label: '设备信息',
            align: 'center',
            menu:false,
            quicksort:false,
            width: 350,
            render:function(value,data){
            	var unameHtml='';
            	if('{{roleinfo.role}}'){
            		var unameHtml="<li class='ul-item'>所属用户："+data.uname+"</li>";
            	}
            	return "<ul class='table-ul'>"+
							"<li class='ul-logo'><span><i class='fa fa-desktop'></i></span></li>"+
							"<li class='user-id' style='display:none'>"+data.userid+"</li>"+
							"<li class='ul-item fw-600 device-sn'>"+data.sn+"</li>"+
							"<li class='ul-item'>设备名称："+data.name+"</li>"+
							unameHtml+
							"<li class='ul-item'>IMEI："+data.imei+"</li>"+
							"<li class='ul-item'>创建时间："+timestampToTime(data.createdate)+"</li>"+
						"</ul>";
            }
        },
        {
        	name:'protocol',
        	label:'通信协议',
        	align:'center',
        	quicksort:false,
        	width:150,
        	type:'select',
        	items:function(){
        		return  $.getJSON('/device/protocollist')
        	},
        	itemattr:{value:'name',label:'name'},
        	render:function(value,data){
        		return data.protocol
        	}
        },
        {
        	name:'businessname',
        	label:'设备业务',
        	align:'center',
        	quicksort:false,
        	width:150,
        	type:'select',
        	items:function(){
        		return $.post('/devices/businesslist');	        	
			       },
        	itemattr:{value:'name',label:'name'},
        	render:function(value,data){
        		return data.businessname
        	}
        },
        {
        	name:'parsektv',
        	label:'私有协议',
        	align:'center',
        	quicksort:false,
        	width:150,
        	type:'select',
        	items:function(){
        		return [{'state':'1','name':'有'},{'state':'0','name':'无'}];	        	
			       },
        	itemattr:{value:'state',label:'name'},
    		render:function(value,data){
	    		if(data.parsektv==1){
	    			return '<p><i class="fa fa-check" style="color:#4e9dff; font-size: 20px;"></i></p>';
	    		}else{
	    			return '';
	    		}
        	}
        },
        {
            name: 'operation',
            label: '操作',
            quicksort:false,
            align: 'center',
            menu:false,
            width:300,
            render:function(value,data){
            	var stringData=JSON.stringify(data);
            	if(data.parsektv==1){
            		return "<div class='operation-btn'><a title='编辑' onclick='device_edit("+stringData+")'><i class='fa fa-edit'></i></a><a title='删除' onclick='device_del("+stringData+")'><i class='fa fa-trash-o'></i></a><a title='详情' onclick='device_details("+stringData+")'><i class='fa fa-list-alt'></i></a><a title='私有数据可视化' onclick='device_chart("+stringData+")'><i class='fa fa-line-chart'></i></a><a title='配置' onclick='device_configure("+stringData+")'><i class='fa fa-cog'></i></a></div>"
            	}else{
            		return "<div class='operation-btn'><a title='编辑' onclick='device_edit("+stringData+")'><i class='fa fa-edit'></i></a><a title='删除' onclick='device_del("+stringData+")'><i class='fa fa-trash-o'></i></a><a title='详情' onclick='device_details("+stringData+")'><i class='fa fa-list-alt'></i></a><a title='配置' onclick='device_configure("+stringData+")'><i class='fa fa-cog'></i></a></div>"
            	}
            	
            }
        }],
		paging:{pageSize:5,pageCurrent:1},
		showLinenumber:false
	})	
	
	})

function dialog_devices_add(){
	BJUI.dialog({
		id:"deviceAdd",
		url:"/devices/add",
		title:"添加设备",
		width:"620",
		height:"600",
		mask:true,
		maxable:false

	})
}
function device_details(obj){
	BJUI.navtab({
		id:"deviceDetails",
		url:"/devices/details",
		title:"设备详情",
		type:"post",
		fresh:true,
		data:{"deviceSn":obj.sn},
		width:"900",
		height:"700",
		onClose:function(){
			BJUI.navtab('switchTab', 'sysdevice');
		},
		mask:true

	})
	$('.navtab-sysdevice').addClass("active");
}
function device_edit(obj){
	BJUI.dialog({
		id:"deviceEdit",
		url:"/devices/editPage",
		title:"编辑设备信息",
		type:"post",
		data:{"deviceSn":obj.sn,'userId':obj.userid},
		width:"620",
		height:"600",
		mask:true,
		maxable:false
	})
}
function device_del(obj){
	BJUI.alertmsg('confirm', '确定要删除吗！', {
	        okCall: function() {
	            $.ajax({
					url:'/devices/del',
					type:'post',
					data:{'ids':[obj.sn]},
					dataType:'json',
					success:function(data){
						$("#deviceForm").submit();
						BJUI.alertmsg('ok',data.message);
					}

				})
	        }
	    })
}
function device_chart(obj) {
	BJUI.dialog({
		id:"deviceEdit",
		url:"/devices/chartPage",
		title:obj.sn,
		type:"post",
		data:{"deviceSn":obj.sn},
		width:"1100",
		height:"700",
		mask:true,
		maxable:false
	})
}
function device_configure(obj){
	BJUI.dialog({
		id:"deviceConfigure",
		url:"/devices/configure",
		title:"配置",
		type:"post",
		data:{"deviceConfigure":obj.parsektv,"deviceSn":obj.sn},
		width:"720",
		height:"500",
		mask:true,
		maxable:false
	})
}
function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = (date.getHours() <10 ? '0'+date.getHours() : date.getHours()) + ':';
        m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
        s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds());
        return Y+M+D+h+m+s;
}
function setDeviceSearchValue(from){
	$('#device-name-input').val()!='输入设备SN' ? $('#deviceNameDisNone').val($('#device-name-input').val()) : $('#deviceNameDisNone').val('');
      if('{{roleinfo.role}}'){
        $('#device-uname-input').val()!='输入所属用户' ? $('#deviceUnameDisNone').val($('#device-uname-input').val()) : $('#deviceUnameDisNone').val('');

      }
      return true;
}
</script>